<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<script src="../cwjy/js/echarts.min.js"></script>
<body>
<div class="container-fluid p-0">

    <h1 class="h3 mb-3" style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;margin-top: 1%">各状态统计</h1>
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="card flex-fill w-100">
                <div class="card-body">
                    <div class="chart" id ="mychar">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart" id="charPie">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart" id="charPie2">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart" id="charPie3">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">


    let dailyOrderName = [];
    let dailyOrderCount = [];
    $.ajax({
        type: 'post',
        async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: 'http://localhost:8888/cwjy/Home/dailyOrder',    //请求发送到Servlet
        contentType: 'application/json;charset=UTF-8',//指定消息请求类型
        data: {},
        timeout: 10000,    //超时10s
        success: function (res) {
            console.log(res)
            for (let i = 0; i < res.data.length; i++) {
                dailyOrderName[i] = res.data[i].name;
                dailyOrderCount[i] = res.data[i].count;
            }
        }
    });

    var myChart = echarts.init(document.getElementById('mychar'));
    option = {
        tooltip: {
            trigger: 'axis'
        },
        title:{
            text: '每日商品订单数',
            left: 40
        },
        xAxis: [{
            type: 'category',
            data: dailyOrderName,
            axisLine: {
                lineStyle: {
                    color: "#999"
                }
            }
        }],
        yAxis: [{
            type: 'value',
            splitNumber: 4,
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#333"
                },
            },
            nameTextStyle: {
                color: "#999"
            },
            splitArea: {
                show: false
            }
        }],
        series: [{
            name: '订单数',
            type: 'line',
            data: dailyOrderCount,
            lineStyle: {
                normal: {
                    width: 8,
                    color: {
                        type: 'linear',

                        colorStops: [{
                            offset: 0,
                            color: '#A9F387' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#48D8BF' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100,*/
                    borderColor: "#A9F387"
                }
            },
            smooth: true
        }]
    };
    myChart.setOption(option);


    let dailyFosterOrderName = [];
    let dailyFosterOrderCount = [];
    $.ajax({
        type: 'post',
        async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: 'http://localhost:8888/cwjy/Home/dailyFosterOrder',    //请求发送到Servlet
        contentType: 'application/json;charset=UTF-8',//指定消息请求类型
        data: {},
        timeout: 10000,    //超时10s
        success: function (res) {
            for (let i = 0; i < res.data.length; i++) {
                dailyFosterOrderName[i] = res.data[i].name;
                dailyFosterOrderCount[i] = res.data[i].count;
            }
        }
    });


    let dailyFosterOrderCountOption = $.extend(option,'{}');
    dailyFosterOrderCountOption.title.text = "每日寄养订单数";
    dailyFosterOrderCountOption.series[0].data = dailyFosterOrderCount;
    dailyFosterOrderCountOption.xAxis[0].data = dailyFosterOrderName;
    var myChart1 = echarts.init(document.getElementById('charPie'));
    myChart1.setOption(dailyFosterOrderCountOption);




    let fosterCareClassificationJson = [];
    $.ajax({
        type: 'post',
        async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: 'http://localhost:8888/cwjy/Home/fosterCareClassification',    //请求发送到Servlet
        contentType: 'application/json;charset=UTF-8',//指定消息请求类型
        data: {},
        timeout: 10000,    //超时10s
        success: function (res) {
            console.log(res)
            for (let i = 0; i < res.data.length; i++) {
                let json  = {value: res.data[i].count, name: res.data[i].name};
                fosterCareClassificationJson[i] = json;
            }
        }
    });


    option1 = {
        tooltip: {
            trigger: 'item'
        },
        title:{
            text: '已寄养宠物分类',
            left: 40
        },
        legend: {
            type:"scroll",
            orient: 'vertical',
            left:'10%',
            align:'left',
            top:'middle',
            textStyle:{
                fontWeight: 'bold',
                shadowColor: '#ffffff',
                shadowBlur: 20,
                fontSize: 15,
                shadowOffsetX: 10,
                textShadowColor:'#000000',
                textShadowBlur: 10
            }
        },
        series: [
            {
                name: '宠物类别',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: fosterCareClassificationJson
            }
        ]
    };
    var myChart3 = echarts.init(document.getElementById('charPie3'));
    myChart3.setOption(option1);

    let salesRankingJson = [];
    $.ajax({
        type: 'post',
        async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: 'http://localhost:8888/cwjy/Home/salesRanking',    //请求发送到Servlet
        contentType: 'application/json;charset=UTF-8',//指定消息请求类型
        data: {},
        timeout: 10000,    //超时10s
        success: function (res) {
            for (let i = 0; i < res.data.length; i++) {
                let json  = {value: res.data[i].count, name: res.data[i].name};
                salesRankingJson[i] = json;
            }
        }
    });


    let salesRankingOption = $.extend(option1,'{ }');
    salesRankingOption.title.text = "商品销售数量分部";
    console.log(salesRankingOption)
    salesRankingOption.series[0].data = salesRankingJson;
    var myChart2 = echarts.init(document.getElementById('charPie2'));
    myChart2.setOption(salesRankingOption);

</script>
</body>
</html>